<template>
    <div>
        <div class="contact">
		<div class="container">
			<h3 class="agileits-title">发布的信息</h3>
			<div class="contact-agileinfo">
                <!-- <div class="col-md-1"></div> -->
                <div class="col-md-12">
                     <el-table :data="petsData" stripe style="width: 100%">
                        <el-table-column prop="title" label="标题" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="content" label="内容" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="category" label="宠物类别" ></el-table-column>
                        <el-table-column prop="type" label="信息类别" ></el-table-column>
                        <el-table-column prop="timestamp" label="发布时间" ></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="warning" @click="deleteInfo(scope.row)">删除</el-button>     
                            </template> 
                        </el-table-column>
                    </el-table>
                    <pagination-box :num="total" :name="'pets'"></pagination-box>       
                </div>
				<div class="clearfix"></div>
			</div>
		</div>
        </div>
    </div>
</template>

<script>
import pagination from './subcomponents/pagination.vue'
export default {
    data() {
        return {
            petsData:[],
            total:0,
            page: this.$route.query.page || 1,
        };
    },
    created(){
        if(this.$store.state.UID){
            this.petsInfo()
        }
    },
    watch:{
        '$route'(to, from){
            if(to.query.page != from.query.page){
                this.page = to.query.page
                this.petsInfo()
            }
        }
    },
    methods: {
        petsInfo(){
            const path = 'http://10.138.120.46:5000/api/pets_info/' + this.$store.state.UID + '?page=' + this.page
            var that = this
            this.axios.get(path).then((response)=>{
                if(response.status === 200){
                    that.total = response.data[0]
                    that.petsData = response.data.slice(1)
                }
            }).catch((error)=>{
                alert(error)
            })
        },
        deleteInfo(row){
            const path = 'http://10.138.120.46:5000/api/del_info/' + row.id
            var that = this
            this.axios.post(path).then((response)=>{
                if(response.status === 200){
                    that.$message({
                        type:'warning',
                        message:'删除成功！'
                    })
                    that.petsInfo()
                }
            }).catch((error)=>{
                alert(error)
            })
        }
    },
    components:{
        'pagination-box':pagination
    }
};
</script>

<style scoped lang="scss">

</style>
